
        var mouseX,mouseY;
        var chasingMouse = autoAppearing = null;
        var windowWidth;
        var exampleStyleUpdating = watchWidth = null; 
        function exampleStyleChange(ele){
            clearTimeout(exampleStyleUpdating);
            var row,col,itemHeight;
           
            var itemNUm = $(ele).find('.item').length;
            if(window.innerWidth > 1150){
                col = 4;
            }else if(window.innerWidth >= 768 && window.innerWidth <= 1150){
                col = 2;
            }else{
                col = 1;
            }
            row = Math.ceil(itemNUm / col);
            
            itemHeight = $(ele).width() / col;
            $(ele).height(row * itemHeight)
            for(var r = 0;r < row;r++){
                for(var n = 0;n < col;n++){
                    var index = r * col + n;
                    if(index > itemNUm - 1) break;
                    var positionLeft = $(ele).find('.item:eq(' + index + ')')[0].positionLeft = parseInt(n * itemHeight);
                    var positionTop = $(ele).find('.item:eq(' + index + ')')[0].positionTop = parseInt(r * itemHeight);
                    var transLeft = positionLeft - parseInt($(ele).find('.item:eq(' + index + ')').css('left'));
                    var transTop = positionTop - parseInt($(ele).find('.item:eq(' + index + ')').css('top'));
                    var translate = 'translate3d(' + transLeft + 'px,'+ transTop + 'px,0px)';
                   
                    $(ele).find('.item:eq(' + index + ')').css({'transform':translate,'transition':'transform .4s ease'});
                     
                }
            }
            windowWidth = window.innerWidth;
            exampleStyleUpdating = setTimeout(function(){
                for(var m = 0;m < itemNUm;m++){
                    $(ele).find('.item:eq(' + m + ')')[0].style.cssText = 'left:'+ $(ele).find('.item:eq(' + m + ')')[0].positionLeft +'px;top:' + $(ele).find('.item:eq(' + m +')')[0].positionTop + 'px;';
                }
            },400)
        }
        
        $(document).ready(function(){
            windowWidth = window.innerWidth;
            mouseX = event.clientX || 0;
            mouseY = event.clientY || 0;
            setTimeout(function(){
                exampleStyleChange('.cases .box.current');
            },animateDelayCount)
            $('body').mousemove(function(event){
                mouseX = event.clientX;
                mouseY = event.clientY;
                
            })
            chasingMouse = setInterval(function(){
                for(var n = 0;n < $('.needHover').length;n++){
                    var ele_h = $('.needHover')[n].offsetHeight;
                    var ele_w = $('.needHover')[n].offsetWidth;
                    var targetTop = mouseY - $('.needHover')[n].getBoundingClientRect().top;
                    var targetLeft = mouseX - $('.needHover')[n].getBoundingClientRect().left;
                    
                    if((targetLeft < 0 || targetLeft > ele_w) || (targetTop < 0 || targetTop > ele_h)){
                        if($('.needHover')[n].className.indexOf('hoverFather') >= 0){
                            var son_h = $('.needHover:eq(' + n + ') .hoverSon')[0].offsetHeight;
                            var son_w = $('.needHover:eq(' + n + ') .hoverSon')[0].offsetWidth;
                            var sonTop = mouseY - $('.needHover:eq(' + n + ') .hoverSon')[0].getBoundingClientRect().top;
                            var sonLeft = mouseX - $('.needHover:eq(' + n + ') .hoverSon')[0].getBoundingClientRect().left;
                            if((sonLeft < 0 || sonLeft > son_w) || (sonTop < 0 || sonTop > son_h)){
                                if($('.needHover')[n].className.indexOf('mouseOn') < 0) continue;
                                $('.needHover:eq(' + n +')').removeClass('mouseOn');
                            }else{
                                if($('.needHover')[n].className.indexOf('mouseOn') >= 0) continue;
                                $('.needHover:eq(' + n +')').addClass('mouseOn');
                            }
                        }else{
                            if($('.needHover')[n].className.indexOf('mouseOn') < 0) continue;
                            $('.needHover:eq(' + n +')').removeClass('mouseOn');
                        }
                    }else{//if((targetLeft > 0 && targetLeft < ele_w) && (targetTop > 0 && targetTop < ele_h))
                        if($('.needHover')[n].className.indexOf('mouseOn') >= 0) continue;
                        $('.needHover:eq(' + n +')').addClass('mouseOn');
                    }
                }
                
            },10);
            
            
            var autoAnimate = [];
            for(var a = 0;a < $('.autoAnimate').length;a++){
                $('.autoAnimate')[a].appears = false;
                autoAnimate.push($('.autoAnimate')[a]);
            }   
            
            autoAppearing = setInterval(function(){
                if(beginningDelay != null){
                    beginningDelay += 10;
                    if(beginningDelay <= animateDelayCount) return false;
                }
                var fixed = $('.navSide').css('height') == '50px'?true:false;
                for(var n = 0;n < autoAnimate.length;n++){
                    //var ele_top = autoAnimate[n].offsetTop;
                    var ele_h = autoAnimate[n].offsetHeight;
                    var window_h = window.innerHeight;
                    //var scrollTop = document.documentElement.scrollTop || document.body.scrollTop;
                    var window_top = autoAnimate[n].getBoundingClientRect().top;
                    fixed && (ele_h -= 50);
                    autoAnimate[n].className.indexOf('disorder') > 0 && (window_h -= 160);
                if(
                    
                    //ele_top + 160 < window_h + scrollTop
                    window_top <= window_h
                    &&
                    window_top > - ele_h
                    //ele_h + ele_top > scrollTop
                     ){
                         if(autoAnimate[n].className.indexOf('inview') <= 0){
                            $('.autoAnimate:eq(' + n + ')').addClass('inview');
                         }
                         autoAnimate[n].appears = true;
                    }else{
                        if(autoAnimate[n].className.indexOf('inview') >= 0){
                            $('.autoAnimate:eq(' + n + ')').removeClass('inview');
                         }
                            autoAnimate[n].appears = false;
                    } 
                }
            },10);
            
            watchWidth = setInterval(function(){
                if(windowWidth != window.innerWidth){
                    exampleStyleChange('.cases .box.current');
                    mouseX = mouseY = 0;
                }
            },10)
            
            $('.find .menu>*').click(function(){
                if($('.find .menu')[0].className.indexOf('show') < 0){
                    $('.find .menu ul').css('display','block');
                    setTimeout(function(){
                        $('.find .menu').addClass('show');
                    },10)
                }
            })
            $('*').click(function(ev){
                var oEvent = ev || event;
                if($('.find .menu')[0].className.indexOf('show') >= 0){
                    oEvent.cancelBubble = true;
                    oEvent.stopPropagation();
                    $('.find .menu').removeClass('show');
                    setTimeout(function(){
                        $('.find .menu ul').css('display','none');
                    },500)
                }
            })
            
            
            $('.find .menu li').click(function(){
                $('.find .menu p').text($(this).text());
            })
            
        })